<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 个人资料</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="title">个人资料</div>
      <div class="action" data-nav="settings.html">
        <i class="fas fa-cog"></i>
      </div>
    </div>
    
    <div class="screen-container">
      <!-- Profile Header -->
      <div class="profile-header">
        <div class="profile-cover"></div>
        <div class="profile-info">
          <div class="profile-avatar">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          </div>
          <div class="profile-details">
            <h2>张伟</h2>
            <p class="text-secondary">@zhangwei</p>
            <p>坚持让习惯成为力量</p>
          </div>
        </div>
        
        <div class="profile-stats">
          <div class="profile-stat">
            <div class="stat-value">5</div>
            <div class="stat-label">习惯</div>
          </div>
          <div class="profile-stat">
            <div class="stat-value">152</div>
            <div class="stat-label">完成次数</div>
          </div>
          <div class="profile-stat">
            <div class="stat-value">21</div>
            <div class="stat-label">最长连续</div>
          </div>
        </div>
      </div>
      
      <!-- Achievement Cards -->
      <div class="profile-section">
        <div class="section-header">
          <h3>成就</h3>
          <a href="#" class="text-primary">查看全部</a>
        </div>
        
        <div class="achievements-container">
          <div class="achievement">
            <div class="achievement-icon">
              <i class="fas fa-award"></i>
            </div>
            <div class="achievement-name">习惯大师</div>
          </div>
          
          <div class="achievement">
            <div class="achievement-icon">
              <i class="fas fa-fire"></i>
            </div>
            <div class="achievement-name">连续30天</div>
          </div>
          
          <div class="achievement">
            <div class="achievement-icon">
              <i class="fas fa-medal"></i>
            </div>
            <div class="achievement-name">早起先锋</div>
          </div>
          
          <div class="achievement">
            <div class="achievement-icon locked">
              <i class="fas fa-crown"></i>
            </div>
            <div class="achievement-name">100天</div>
          </div>
          
          <div class="achievement">
            <div class="achievement-icon locked">
              <i class="fas fa-trophy"></i>
            </div>
            <div class="achievement-name">习惯专家</div>
          </div>
        </div>
      </div>
      
      <!-- Current Habits -->
      <div class="profile-section">
        <div class="section-header">
          <h3>当前习惯</h3>
          <a href="dashboard.html" class="text-primary">管理</a>
        </div>
        
        <div class="list-group">
          <div class="list-item">
            <div class="flex gap-10">
              <i class="fas fa-spa text-primary"></i>
              <div>
                <div class="item-title">晨间冥想</div>
                <div class="text-secondary">连续21天</div>
              </div>
            </div>
            <div class="streak">
              <i class="fas fa-fire"></i>
            </div>
          </div>
          
          <div class="list-item">
            <div class="flex gap-10">
              <i class="fas fa-book text-primary"></i>
              <div>
                <div class="item-title">阅读</div>
                <div class="text-secondary">连续14天</div>
              </div>
            </div>
            <div class="streak">
              <i class="fas fa-fire"></i>
            </div>
          </div>
          
          <div class="list-item">
            <div class="flex gap-10">
              <i class="fas fa-tint text-primary"></i>
              <div>
                <div class="item-title">喝水</div>
                <div class="text-secondary">连续32天</div>
              </div>
            </div>
            <div class="streak">
              <i class="fas fa-fire"></i>
            </div>
          </div>
          
          <div class="list-item">
            <div class="flex gap-10">
              <i class="fas fa-running text-primary"></i>
              <div>
                <div class="item-title">运动</div>
                <div class="text-secondary">连续5天</div>
              </div>
            </div>
            <div class="streak">
              <i class="fas fa-fire"></i>
            </div>
          </div>
          
          <div class="list-item">
            <div class="flex gap-10">
              <i class="fas fa-book-open text-primary"></i>
              <div>
                <div class="item-title">写日记</div>
                <div class="text-secondary">连续9天</div>
              </div>
            </div>
            <div class="streak">
              <i class="fas fa-fire"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Activity Feed -->
      <div class="profile-section">
        <div class="section-header">
          <h3>最近活动</h3>
          <a href="#" class="text-primary">查看全部</a>
        </div>
        
        <div class="activity-feed">
          <div class="activity-item">
            <div class="activity-icon">
              <i class="fas fa-check-circle"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">完成了「晨间冥想」</div>
              <div class="activity-time">今天 06:45</div>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">
              <i class="fas fa-check-circle"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">完成了「阅读」</div>
              <div class="activity-time">今天 07:30</div>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">
              <i class="fas fa-check-circle"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">完成了「喝水」</div>
              <div class="activity-time">今天 08:15</div>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">
              <i class="fas fa-trophy"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">获得成就「连续21天冥想」</div>
              <div class="activity-time">昨天</div>
            </div>
          </div>
          
          <div class="activity-item">
            <div class="activity-icon">
              <i class="fas fa-user-plus"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">加入了「早起者联盟」挑战</div>
              <div class="activity-time">3天前</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Friends Section -->
      <div class="profile-section">
        <div class="section-header">
          <h3>好友</h3>
          <a href="#" class="text-primary">查看全部</a>
        </div>
        
        <div class="friends-container">
          <div class="friend-item">
            <div class="friend-avatar">
              <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Friend Avatar">
            </div>
            <div class="friend-name">李小明</div>
          </div>
          
          <div class="friend-item">
            <div class="friend-avatar">
              <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Friend Avatar">
            </div>
            <div class="friend-name">王大卫</div>
          </div>
          
          <div class="friend-item">
            <div class="friend-avatar">
              <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Friend Avatar">
            </div>
            <div class="friend-name">陈静</div>
          </div>
          
          <div class="friend-item">
            <div class="friend-avatar">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Friend Avatar">
            </div>
            <div class="friend-name">张教练</div>
          </div>
          
          <div class="friend-item add-friend">
            <div class="friend-avatar">
              <i class="fas fa-plus"></i>
            </div>
            <div class="friend-name">添加</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
      <div class="tab-item" data-nav="dashboard.html">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>
      <div class="tab-item" data-nav="templates.html">
        <i class="fas fa-list-ul"></i>
        <span>模板</span>
      </div>
      <div class="tab-item" data-nav="analytics.html">
        <i class="fas fa-chart-pie"></i>
        <span>统计</span>
      </div>
      <div class="tab-item" data-nav="community.html">
        <i class="fas fa-users"></i>
        <span>社区</span>
      </div>
      <div class="tab-item active">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>
  </div>

  <style>
    /* Profile specific styles */
    .profile-header {
      background-color: var(--card-color);
      border-radius: 10px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    
    .profile-cover {
      height: 100px;
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }
    
    .profile-info {
      display: flex;
      padding: 15px;
      position: relative;
    }
    
    .profile-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid white;
      margin-top: -40px;
      position: relative;
      background-color: white;
    }
    
    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .profile-details {
      margin-left: 15px;
      flex: 1;
    }
    
    .profile-details h2 {
      margin: 0 0 5px 0;
    }
    
    .profile-details p {
      margin: 5px 0;
    }
    
    .profile-stats {
      display: flex;
      border-top: 1px solid var(--border-color);
    }
    
    .profile-stat {
      flex: 1;
      text-align: center;
      padding: 15px 0;
    }
    
    .profile-stat:not(:last-child) {
      border-right: 1px solid var(--border-color);
    }
    
    .profile-stat .stat-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .profile-stat .stat-label {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .profile-section {
      margin-bottom: 20px;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .section-header h3 {
      margin: 0;
    }
    
    .achievements-container {
      display: flex;
      overflow-x: auto;
      gap: 15px;
      padding: 5px 0;
    }
    
    .achievement {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
    }
    
    .achievement-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      margin-bottom: 5px;
    }
    
    .achievement-icon.locked {
      background-color: var(--border-color);
      color: var(--text-secondary);
    }
    
    .achievement-name {
      font-size: 12px;
      text-align: center;
      color: var(--text-color);
    }
    
    .activity-feed {
      background-color: var(--card-color);
      border-radius: 10px;
      overflow: hidden;
    }
    
    .activity-item {
      display: flex;
      padding: 15px;
      border-bottom: 1px solid var(--border-color);
      align-items: center;
    }
    
    .activity-item:last-child {
      border-bottom: none;
    }
    
    .activity-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      color: var(--primary-color);
      font-size: 18px;
    }
    
    .activity-content {
      flex: 1;
    }
    
    .activity-title {
      margin-bottom: 5px;
    }
    
    .activity-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .friends-container {
      display: flex;
      overflow-x: auto;
      gap: 15px;
      padding: 5px 0;
    }
    
    .friend-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
    }
    
    .friend-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 5px;
    }
    
    .friend-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .friend-name {
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    
    .add-friend .friend-avatar {
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary-color);
    }
    
    .item-title {
      font-weight: 500;
      margin-bottom: 5px;
    }
  </style>
  
  <script src="js/app.js"></script>
</body>
</html>
